@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(135deg, rgb(163, 234, 255), rgb(255, 211, 204));
}

.search {
  /* 不给容器指定宽度 */
  /* width: 300px; */
  height: 50px;
  position: relative;
  background-color: #fff;
  /* display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transition: width 0.3s ease; */
}

/* 不操纵父容器的宽度
.search.active {
  width: 50px;
} */

.search .search_input {
  /* 去除默认样式 */
  border: 0;
  /* padding: 0; */
  margin: 0;
  height: 50px;
  /* flex:1; */
  /* 直接控制宽度 */
  transition: width 0.3s ease;
  /* 以下补充 */
  width: 50px;
  font-size: 18px;
  padding: 15px;
}

.search.active .search_input {
  /* display: none; */
  width: 200px;
}

.search_input:focus,.btn:focus {
  /* 去除获取焦点时的outline */
 outline: none;
}

.btn {
  /* 去除默认样式 */
  border: 0;
  background-color: #fff;
  width: 50px;
  /* 补充 */
  cursor: pointer;
  font-size: 24px;
  height: 50px;
  transition: transform 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
}
.search.active .btn {
  /* 通过定位，改变按钮的位置 */
  transform: translateX(198px);
}